<template>
  <div id="container">
    <Chart height="389px" :option="chartOption" />
  </div>
</template>

<script>

// echarts引入
import * as echarts from 'echarts'

export default {
  name: "work-sankey",
  components:{

  },
  data() {
    return {
      chartOption:{},
    }
  },
  mounted() {
    // 桑基图-能量流动图
    // 是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态
    let option = {
      title:{
        text:'桑基图',
      },
      // 小提示框
      tooltip:{
        trigger:'item',
        triggerOn:'mousemove',
        formatter:(params) => {
          console.log('params:', params);
          let { data } = params;
          // 自定义小提示框显示样式
          return `<div>
                  <div>起始：${data.source}</div>
                  <div>终止：${data.target}</div>
                  <div>数值：${data.value}</div>
                  </div>`;
        },
      },
      series: {
        type: 'sankey',
        layout: 'none',
        emphasis: {
          focus: 'adjacency'
        },
        // 节点连接线条颜色
        lineStyle: {
          color: 'gradient',
          curveness: 0.5
        },
        // 节点显示的位置 - 默认在右侧
        // label: {
        //   show: true,
        //   position: 'right'
        // },
        // 所有的节点名称 - 层级
        data: [
          {
            name: 'a'
          },
          {
            name: 'b'
          },
          {
            name: 'a1'
          },
          {
            name: 'a2'
          },
          {
            name: 'b1'
          },
          {
            name: 'c'
          }
        ],
        // 关联：link是连接各个节点（源节点和目标节点）的边。其中，source指源节点，即边的起始节点；target指目标节点，即边的终止节点；value是边的数值，决定边的宽度。
        links: [
          {
            // 来源：源节点
            source: 'a',
            // 流向：目标节点
            target: 'a1',
            // a流向a1的值是5  边的数值,决定边的宽度(纵向高度)。
            value: 5
          },
          {
            source: 'a',
            target: 'a2',
            value: 3
          },
          {
            source: 'b',
            target: 'b1',
            value: 8
          },
          {
            source: 'a',
            target: 'b1',
            value: 3
          },
          {
            source: 'b1',
            target: 'a1',
            value: 1
          },
          {
            source: 'b1',
            target: 'c',
            value: 2
          }
        ]
      }
    };
    this.chartOption = option;
  },
}
</script>

<style scoped>

</style>
